Input 输入框

您所在的位置:网站首页 el-input 无法输入 Input 输入框

Input 输入框

2023-11-08 12:05| 来源: 网络整理| 查看: 265

Input 输入框 #

通过鼠标或键盘输入字符

WARNING

Input 为受控组件,它 总会显示 Vue 绑定值。

在正常情况下,input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model)。 否则,输入框的值将不会改变。

不支持 v-model 修饰符。

基础用法 #禁用状态 #一键清空 #格式化 #

在 formatter的情况下显示值,我们通常同时使用 parser

密码框 #带图标的输入框 #

带有图标标记输入类型

文本域 #

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

自适应文本域 #

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象,让输入框自动调整。

复合型输入框 #

可以在输入框中前置或后置一个元素,通常是标签或按钮。

尺寸 #输入长度限制 #API #Attributes #属性名说明类型默认值type类型string 等原生 input 类型textmodel-value / v-model绑定值string / number—maxlength最大输入长度string / number—minlength原生属性,最小输入长度number—show-word-limit是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效booleanbooleanplaceholder输入框占位文本string—clearable是否显示清除按钮,只有当 type 不是 textarea时生效booleanfalseformatter指定输入值的格式。(只有当 type 是"text"时才能工作)Function—parser指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)Function—show-password是否显示切换密码图标booleanfalsedisabled是否禁用booleanfalsesize输入框尺寸,只在 type 不为 'textarea' 时有效enum—prefix-icon自定义前缀图标string / Component—suffix-icon自定义后缀图标string / Component—rows输入框行数,仅 type 为 'textarea' 时有效numbernumberautosizetextarea 高度是否自适应,仅 type 为 'textarea' 时生效。 可以接受一个对象,比如: { minRows: 2, maxRows: 6 }boolean / objectfalseautocomplete原生 autocomplete 属性stringoffname等价于原生 input name 属性string—readonly原生 readonly 属性,是否只读booleanfalsemax原生 max 属性,设置最大值——min原生属性,设置最小值——step原生属性,设置输入字段的合法数字间隔——resize控制是否能被用户缩放enum—autofocus原生属性,自动获取焦点booleanfalseform原生属性string—label a11y等价于原生 input aria-label 属性string—tabindex输入框的 tabindexstring / number—validate-event输入时是否触发表单的校验booleantrueinput-styleinput 元素或 textarea 元素的 stylestring / object{}Events #事件名说明类型blur当选择器的输入框失去焦点时触发Functionfocus当选择器的输入框获得焦点时触发Functionchange仅当 modelValue 改变时,当输入框失去焦点或用户按Enter时触发Functioninput在 Input 值改变时触发Functionclear在点击由 clearable 属性生成的清空按钮时触发FunctionSlots #插槽名说明prefix输入框头部内容,只对非 type="textarea" 有效suffix输入框尾部内容,只对非 type="textarea" 有效prepend输入框前置内容,只对非 type="textarea" 有效append输入框后置内容,只对非 type="textarea" 有效Exposes #名称说明类型blur使 input 失去焦点Functionclear清除 input 值Functionfocus使 input 获取焦点FunctioninputInput HTML 元素objectrefHTML元素 input 或 textareaobjectresizeTextarea改变 textarea 大小Functionselect选中 input 中的文字FunctiontextareaHTML textarea 元素objecttextareaStyletextarea 的样式object常见问题 #ElInput 组件的宽度为什么在设置了 clearable 时会发生变化 #

典型问题: #7287

PS: 由于ElInput 组件没有默认宽度,当显示 clearable 图标时, 组件的宽度将被撑开,可以通过设置固定宽度属性来解决。

源代码 #

组件 • 文档

贡献者 # 云游君 Jeremy 三咲智子 Xc btea Hefty qiang Zhongxiang Wang msidolphin Aex Alan Wang zz 0song acyza iamkun 류한경 opengraphica bqy_fe Delyan Haralanov Satrong C.Y.Kun Ryan2128 Evan Liu wzc520pyfm 井柏然 Serendipity96 白雾三语 张大大 kouchao kooriookami Herrington Darkholme Zapic bchen1029 SongWuKong Shigma RealityBoy wd troy Enoch Qin on the field of hope Vgbire Hades-li Jeffrey-Wang Kim Yang weidehai


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3